<script setup>
import { ref, onBeforeMount, inject, watch, onMounted } from 'vue'
import request from '../../utils/request'
import navmsgVue from '../navCommponents/navmsg.vue'
import SingleVue from '../navCommponents/Single.vue'
import clusterVue from '../navCommponents/cluster.vue'
import Header from '@/components/Header.vue'

var msg = ref('1')
var navList = ref([])
var upmsg = (e)=>{
  msg.value = e.target.dataset.id === msg?'1':e.target.dataset.id
}
// 是否开启黑暗模式
let isBlackMode = inject('isBlackMode');
watch(() => isBlackMode.value, (newValue) => {
  if(isBlackMode.value) {
    document.body.style.background = '#141414'
    document.body.style.color = '#fff';
  } else {
    document.body.style.color = '#213547';
    document.body.style.background = 'white'
  }
})


var getNav = async()=>{
  try{
    var res = await request.instance.get('/doc/learningcatalog')
    // console.log(res);
    navList.value = res
    console.log(navList.value);
  }catch(error){
    console.error(error);
  }
}

onBeforeMount(() => {
  getNav()
})

onMounted(()=>{
  if(isBlackMode.value) {
    document.body.style.background = '#141414'
    document.body.style.color = '#fff';
  } else {
    document.body.style.color = '#213547';
    document.body.style.background = 'white'
  }
})
</script>
<template>
  <Header></Header>
  <navmsgVue v-if="msg === '1'" :nav="navList"></navmsgVue>
  <SingleVue v-if="msg === '2'"></SingleVue>
  <clusterVue v-if="msg === '3'"></clusterVue>
</template>
<style scoped>
  .concent{
    color: black;
  }
  .navmsg{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    /* margin: 20px; */
    position: fixed;
    /* right: 80px; */
    width: 100%;
    height: 80px;
    background-color: #fff;
    z-index: 1;
  }
  .msg{
    margin: 10px;
    user-select:none;
    font-size: 20px;
  }
  .msgs{
    color: rgb(66,185,131);
    border-bottom: 2px solid rgb(66,185,131);
  }
</style>